<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 * 横竖屏幕检测
		 * @param  {params} object 包含 vertical horizontal
		 * @return {null}        返回null
		 */
		function watchOrientation(params){
			var sEvent = window.orientation ? 'orientationchange' : 'resize';

			window.addEventListener(sEvent,__watchHandle,false);
			__watchHandle();
			function __watchHandle(){

				if(window.orientation){
					//支持陀螺仪设备

					if(window.orientation == 0 || window.orientation == 180){
						//竖屏
						params.vertical && params.vertical();
					}else{
						//横屏
						params.horizontal && params.horizontal();
					}

				}else{
					//不支持陀螺仪设备
					var htmlDoc = document.documentElement;
					if(htmlDoc.clientWidth > htmlDoc.clientHeight){
						//横屏
						params.horizontal && params.horizontal();
					}else{
						//竖屏
						params.vertical && params.vertical();
					}
				}

			}
		}


		watchOrientation({
			vertical:function(){
				alert('vertical')
			},
			horizontal:function(){
				alert('horizontal')
			}
		});
	</script>
</body>
</html>
